<template>
  <div class="demo-conbogrid">
    <p> `row-click`当前选中行 {{ state.row }} </p>
    <v-combogrid
      v-model="state.value"
      v-model:inputlabel="state.label"
      :fields="['id', 'name']"
      :data="state.tableData"
      width="400"
      height="300"
      @row-click="rowClick"
      :columns="[
        { prop: 'name', label: 'Name' },
        { prop: 'id', label: 'value' },
      ]"
    />
  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    value: '',
    label: '',
    tableData: new Array(30).fill(30).map((it, index) => {
      return { id: `id ${index}`, name: `name ${index}` }
    }),
    row: null,
  })

  const rowClick = (row, column, index) => {
    state.row = row
  }
</script>

<style lang="scss" scoped>
  .demo-conbogrid {
    :deep(.el-input) {
      width: 350px;
    }
  }
</style>
